import React, { Component } from 'react';
import styles from './SearchWrap.module.scss';
import { SearchBar } from "antd-mobile";
import { withRouter } from 'react-router-dom';
import {getGoodList} from '../../data/api';

class SearchWrap extends Component {
    state = {
        goodsList:[],
    }
    //防抖
    timeId = null;
    debounce = (fn,time) => {
        if(this.timeId){
            clearTimeout(this.timeId);
            this.timeId = null;
        }
        this.timeId = setTimeout(fn,time);
    }
    handleChange = (v) => {
        this.debounce(async () => {
            let res = await getGoodList({query:v});
            this.setState({goodsList:res.message||[]});
        },1000)
    }
    //点击行李箱去商品列表页面
    gotoxl = (props) => {
        this.props.history.push('goodlist');
    }
    //点击搜索出来的每一项去到对应的商品详情页
    gotoGoodDetail = (goods_id) => {
        this.props.history.push('goodDetail/'+goods_id);
    }
    
    
    
    render() {
        return (
            <div className={styles.searchBox}>
                <div className={styles.txt}>
                    <div className={styles.searchTop}>
                        <SearchBar
                            placeholder="9.9元超值专区"
                            cancelText="取消"
                            onChange={this.handleChange}
                        />
                    </div>
                    <div className={styles.hot}>热门搜索</div>
                    <div className={styles.hotSearch}>
                        <span onClick={this.gotoxl}>行李箱</span>
                        <span>四件套</span>
                        <span>口罩</span>
                        <span>童鞋</span>
                        <span>省钱卡</span>
                        <span>毛巾</span>
                        <span>暖冬爆款</span>
                        <span>电动牙刷</span>
                        <span>人体工学椅</span>
                        <span>洗衣液</span>
                        <span>保温杯</span>
                    </div>

                    <div className={styles.searchContent}>
                        {
                            this.state.goodsList.map((v,i)=>{
                                return <div className={styles.searchItem} key={v.goods_id} onClick={this.gotoGoodDetail.bind(this,v.goods_id)}>
                                    <div className={styles.itemL}>{v.goods_name}</div>
                                    <div className={styles.itemR}>&gt;</div>
                                </div>
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
}
export default withRouter(SearchWrap)
